<template>
  <view class="certificate-car">
    <view class="content">
      <view class="swiper-container">
        <swiper class="swiper">
          <swiper-item>
            <img class="image" src="@/static/certificate-card1.png" alt="" />
          </swiper-item>
        </swiper>
      </view>
      <!-- 商品信息 -->
      <view class="goods">
        <view class="num">
          <u--text
            color="#dd6161"
            text="100积分"
            size="18"
            bold="true"
          ></u--text>
        </view>
        <u--text class="name" text="12元停车券" bold="true"></u--text>
        <view class="other">
          <view class="cell">
            <text class="title">销量: </text><text class="car-num">180</text>
          </view>
        </view>
      </view>
      <u-line></u-line>

      <!-- 商品兑换的数量 -->
      <view class="goods-num">
        <u--text text="数量"></u--text>
        <view class="operator">
          <u-number-box v-model="goodsNum" :min="min" :max="max" :step="1">
            <!-- @blur="blurNumBox(form[item.field], item, $event)"
                    @change="changeNumBox(item, $event)" -->
            <view slot="minus" class="minus">
              <u-icon name="minus" size="12"></u-icon>
            </view>
            <!-- @click="showKeyboardHandler(item, item.field, $event)" -->
            <text slot="input" class="input" @click="showKeyboard = true">
              <text :class="'input-focus'">{{ goodsNum }}</text>
            </text>
            <view slot="plus" class="plus">
              <u-icon name="plus" size="12"></u-icon>
            </view>
          </u-number-box>
        </view>
      </view>
      <u-line></u-line>
      <!-- 商品使用说明 -->
      <view class="goods-desc">
        <!-- 有效日期 -->
        <view class="date">
          <view class="data-desc">
            <u--text text="有效期限"></u--text>
          </view>
          <u--text
            color="#5e6d82"
            size="13"
            text="2023-06-21 00:00:00至2023-08-31 00:00:00"
          ></u--text>
        </view>
        <!-- 使用说明 -->
        <view class="use">
          <view class="use-desc">
            <u--text text="使用说明"></u--text>
          </view>
          <view class="text-content">
            <u--text
              size="13"
              color="#5e6d82"
              text="1、登录携程APP，进入[礼品卡]-[领用礼品卡]页面;"
            ></u--text>
            <u--text
              size="13"
              color="#5e6d82"
              text="2、凭\“礼品卡券号\”和\“密码\”领用任我行游票，成功设置交易密码后就可以使用;礼品卡充值成功后请立刻确认收货，概不退货;"
            ></u--text>
            <u--text
              size="13"
              color="#5e6d82"
              text="3、携程礼品卡需要领用至携程会员帐户内方可使用。"
            ></u--text>
            <u--text
              size="13"
              color="#5e6d82"
              text="4、如忘记交易密码，可在我的携程-携程钱包-安全中心-修改或重置"
            ></u--text>
            <u--text
              size="13"
              color="#5e6d82"
              text="5、遇到任何疑问，可致电携程旅行网客服电话800-820-6666/1010-6666;"
            ></u--text>
            <u--text
              size="13"
              color="#5e6d82"
              text="6、[客服电话]02987573129/13309234742如遇充值或兑换失败等问题可在工作日:9:00-18:00拨打客服热线。"
            ></u--text>
            <u--text
              size="13"
              color="#5e6d82"
              text='7、兑换成功后，请进入"我的-订单--查看订单详情"查看券码。'
            ></u--text>
            <u--text
              size="13"
              color="#5e6d82"
              text="5、遇到任何疑问，可致电携程旅行网客服电话800-820-6666/1010-6666;"
            ></u--text>
            <u--text
              size="13"
              color="#5e6d82"
              text="6、[客服电话]02987573129/13309234742如遇充值或兑换失败等问题可在工作日:9:00-18:00拨打客服热线。"
            ></u--text>
            <u--text
              size="13"
              color="#5e6d82"
              text='7、兑换成功后，请进入"我的-订单--查看订单详情"查看券码。'
            ></u--text>
          </view>
          <text> </text>
        </view>
      </view>
    </view>

    <!-- 合计 -->
    <view class="bottom">
      <view class="cell">
        <text>合计: </text><text class="interal-num">200积分</text>
      </view>
      <u-button
        type="primary"
        :customStyle="cusStyle"
        shape="circle"
        text="立即兑换"
      ></u-button>
    </view>
    <u-keyboard
      v-if="showKeyboard"
      :show="showKeyboard"
      mode="number"
      :dotDisabled="true"
      @cancel="showKeyboard = false"
      @close="showKeyboard = false"
      @confirm="confirmKeyboard"
      @backspace="backspaceKeyboard"
      @change="changeKeyboard($event)"
    ></u-keyboard>
  </view>
</template>


<script>
export default {
  data() {
    return {
      // 商品数量
      goodsNum: "1",
      // 计步器填写键盘是否显示
      showKeyboard: false,
      min: 1,
      max: 999,
      cusStyle: {
        width: "200rpx",
        margin: "0",
      },
    };
  },
  methods: {
    backspaceKeyboard() {
      this.goodsNum = this.goodsNum + "";
      // 删除value的最后一个字符
      if (this.goodsNum.length) {
        this.goodsNum = this.goodsNum.substr(0, this.goodsNum.length - 1);
      }
    },
    changeKeyboard(val) {
      console.log(val);
      this.goodsNum += `${val}`;
      if (this.goodsNum > this.max) {
        this.goodsNum = `${this.max}`;
      }
    },
    confirmKeyboard(e) {
      console.log(e, this.goodsNum, "confirmKeyboard");
      if (!this.goodsNum || this.goodsNum < this.min) {
        this.goodsNum = `${this.min}`;
      }
      this.showKeyboard = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.certificate-car {
  display: flex;
  flex-direction: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: scroll;
    padding: 30rpx;
    .swiper-container {
      height: 360rpx;
      padding: 0 0 40rpx;
      .swiper {
        width: 100%;
        height: 100%;
      }
      .image {
        width: 100%;
        height: 100%;
      }
    }
    .goods {
      padding-bottom: 16rpx;
      .num {
        margin-bottom: 10rpx;
      }
      .other {
        @include flex(flex-end);
        font-size: 15px;
        color: #8f9ca2;
      }
    }
    .goods-num {
      @include flex(space-between);
      margin: 40rpx 0;
      .operator {
        .minus {
          width: 56rpx;
          height: 56rpx;
          background: #e9f4ff;
          color: #aeb6c3;
          border-radius: 4rpx 0px 0px 4rpx;
          border: 1px solid #e3e8ee;
          @include flex(center);
          border-right: none;
        }

        .input {
          width: 168rpx;
          height: 56rpx;
          background-color: #e6effb;

          border-radius: 0px 0px 0px 0px;
          border: 1px solid #e3e8ee;
          @include flex(center);
          font-size: 28rpx;
          // font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #aeb6c3;
          .input-focus {
            color: #5e6d82;
            margin: 0 4px;
            padding: 1px 5px;
            font-size: 13px;
            height: 18px;
            line-height: 18px;
          }
        }

        .plus {
          width: 56rpx;
          height: 56rpx;
          background: #e9f4ff;
          border-radius: 4rpx 0px 0px 4rpx;
          border: 1px solid #e3e8ee;
          border-left: none;
          color: #aeb6c3;
          @include flex(center);
        }
      }
    }
    .goods-desc {
      .date {
        margin: 20rpx 0 40rpx;
        .data-desc {
          margin-bottom: 8rpx;
        }
      }
      .use {
        .use-desc {
          margin-bottom: 8rpx;
        }
      }
    }
  }
  .bottom {
    flex-shrink: 0;
    height: 100rpx;
    padding: 0 20rpx;
    box-shadow: 12rpx 0rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
    @include flex(space-between);
    .cell {
      white-space: nowrap;
      font-size: 30rpx;
      color: #8b8e8f;
      .title{
        font-size: 20rpx;
      }
      .interal-num{
        font-size: 30rpx;
        color: #dd6161;
        margin-left: 20rpx;
      }
    }
  }
}
</style>